<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>修改技能</title>
</head>
<body>
    <h1>修改技能</h1>
<form action="/skill" method="put">
    <input type="hidden" name="sid" value="1">
    <div>  技能名称： <input type="text" name="skillName"> </div>
    <div>  技能类型： <input type="text" name="type"> </div>
    <div>  技能描述： <input type="text" name="description"> </div>
    <div>  冷却： <input type="text" name="cooldown"> </div>
    <div>  消耗： <input type="text" name="cost"> </div>
    <div><input type="button" onclick="updateSkill()" value="修改"> </div>
</form>

<script src="/js/jquery-3.3.1.min.js"></script>
<script src="/js/axios-0.18.0.js"></script>
<script>
    $(function (){
        // 获取地址栏参数
        let url = window.location.search;
        let parmas = new URLSearchParams(url);
        let sid = parmas.get("sid");

        // 发起查询请求,查询技能信息
        axios.get("/skill/"+sid).then((res)=>{
            console.log("返回数据:", res.data);
            if(res.data.code === 200) {
                let data = res.data.data;
                if(!data) {
                    alert("未找到该技能信息");
                    return;
                }
                // 绑定数据
                $('input[name="sid"]').val(data.sid);
                $('input[name="type"]').val(data.type);
                $('input[name="cooldown"]').val(data.cooldown);
                $('input[name="cost"]').val(data.cost);
                $('input[name="description"]').val(data.description);
                $('input[name="skillName"]').val(data.skillName);
            } else {
                console.error("获取技能信息失败:", res.data);
                alert("获取技能信息失败：" + (res.data.msg || "未知错误"));
            }
        }).catch(error => {
            console.error("获取数据失败:", error);
            if(error.response) {
                console.error("错误响应:", error.response.data);
            }
            alert("获取数据失败，请稍后重试");
        });
    });

    function updateSkill(){
        // 封装数据
        let data = {
            sid: $('input[name=sid]').val(),
            skillName: $('input[name=skillName]').val(),
            type: $('input[name=type]').val(),
            description: $('input[name=description]').val(),
            cooldown: $('input[name=cooldown]').val(),
            cost: $('input[name=cost]').val()
        };

        // 发起请求
        axios.put('/skill', data).then((res)=>{
            let result = res.data;
            if(result.code == 200){
                alert("修改成功")
                window.location.href = "./skill.html"
            }else {
                alert("修改失败：" + (result.msg || "未知错误"))
            }
        }).catch(error => {
            console.error("修改失败:", error);
            alert("修改失败，请稍后重试");
        });
    }
</script>
</body>
</html>